<!DOCTYPE html>
<html>
	<head>
		<title>esp32-cam-car</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8"/>
		<style>
			body { font-family: Arial; text-align: center; margin: 0px auto; padding-top: 30px; }
			   table { margin-left: auto; margin-right: auto; }
			   td { padding: 8px; }
			   .button {
			    background-color: #2F4468;
			    border: none;
			    color: white;
			    padding: 10px 20px;
			    text-align: center;
			    text-decoration: none;
			    display: inline-block;
			    font-size: 18px;
			    margin: 6px 3px;
			    cursor: pointer;
			    -webkit-touch-callout: none;
			    -webkit-user-select: none;
			    -khtml-user-select: none;
			    -moz-user-select: none;
			    -ms-user-select: none;
			    user-select: none;
			    -webkit-tap-hightlight-color: rgba(0,0,0,0);
			   }
			   img { 
			       width: auto; max-width: 100%; height: auto; 
			       /* transform: rotateY(180deg); */
			       transform: rotateX(180deg);
			
			}
		</style>
	</head>
	<body>
		<h1>esp32-cam-car</h1>
		<img src="" id="photo">
		<table>
			<tr>
				<td colspan="3" align="center">
					<button class="button"
							onmousedown="toggleCheckbox('forward');"
							ontouchstart="toggleCheckbox('forward');"
							onmouseup="toggleCheckbox('stop');"
							ontouchend="toggleCheckbox('stop');">前</button>
				</td>
			</tr>

			<tr>
				<td align="center">
					<button class="button"
							onmousedown="toggleCheckbox('left');"
							ontouchstart="toggleCheckbox('left');"
							onmouseup="toggleCheckbox('stop');"
							ontouchend="toggleCheckbox('stop');">左</button>
				</td>

				<td align="center">
					<button class="button" onmousedown="toggleCheckbox('stop');" ontouchstart="toggleCheckbox('stop');">停止</button>
				</td>
				<td align="center">
					<button class="button" 
                    onmousedown="toggleCheckbox('right');" 
                    ontouchstart="toggleCheckbox('right');" 
                    onmouseup="toggleCheckbox('stop');" 
                    ontouchend="toggleCheckbox('stop');">右</button>
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<button class="button" 
                    onmousedown="toggleCheckbox('backward');" 
                    ontouchstart="toggleCheckbox('backward');"
                    onmouseup="toggleCheckbox('stop');" 
                    ontouchend="toggleCheckbox('stop');">后</button>
				</td>
			</tr>
		</table>
		<script>
			function toggleCheckbox(x) {
			    var xhr = new XMLHttpRequest();
			    xhr.open("GET", "/action?go=" + x, true);
			    xhr.send();
			   }
			   window.onload = document.getElementById("photo").src = window.location.href.slice(0, -1) + ":81/stream";
		</script>
	</body>
</html>